<template>
  <view v-if="open">
    <u-navbar
      :placeholder="true"
      :titleStyle="{ color: '#ffffff' }"
      leftIconColor="#ffffff"
      bgColor="#3775cb"
      :autoBack="true"
    >
      <template #right>
        <view @click="submitForm">
          <up-text color="#ffffff" text="提交"></up-text>
        </view>
      </template>
    </u-navbar>
    <view
      style="
        margin: 25rpx;
        background-color: #ffffff;
        padding: 15rpx 15rpx 15rpx 15rpx;
        border-radius: 15rpx;
      "
    >
      <view>
        <u--textarea
          v-model="formData.title"
          border="bottom"
          height="20"
          placeholder="标题"
        ></u--textarea>
      </view>
      <view>
        <u--textarea
          v-model="formData.location"
          border="bottom"
          height="20"
          placeholder="地址"
        ></u--textarea>
      </view>
      <view>
        <u--textarea
          v-model="formData.description"
          border="bottom"
          height="450"
          placeholder="请输入会议描述"
        ></u--textarea>
      </view>
      <view
        @click="openSelectCus"
        style="padding: 20rpx 30rpx; background-color: #f7f7f7; margin: 15rpx 0"
      >
        <text style="padding-top: 14rpx; font-size: 26rpx; width: 450rpx">
          选择客户{{ formData!.customerLabel ? '：' + formData!.customerLabel : '' }}</text
        >
      </view>
      <CusPicker
        v-model:labels="formData!.customerLabel"
        v-model="formData!.customerIds"
        ref="cusPicker"
      />
      <u-datetime-picker
        :show="startTimeshow"
        v-model="formData.startTime"
        @cancel="startTimeshow = false"
        @confirm="startTimeshow = false"
        :closeOnClickOverlay="true"
        :formatter="formatter"
        mode="datetime"
      ></u-datetime-picker>
      <u-datetime-picker
        :show="endTimeshow"
        v-model="formData.endTime"
        @cancel="endTimeshow = false"
        @confirm="endTimeshow = false"
        :closeOnClickOverlay="true"
        :formatter="formatter"
        mode="datetime"
      ></u-datetime-picker>
      <u-cell-group>
        <u-cell
          :isLink="true"
          :title="
            formData.startTime ? '开始时间' + convertTimestamp(formData.startTime) : '开始时间'
          "
          @click="
            () => {
              if (!formData.startTime) {
                formData.startTime = new Date().getTime()
              }
              startTimeshow = true
            }
          "
        ></u-cell>
        <u-cell
          :isLink="true"
          :title="formData.endTime ? '结束时间' + convertTimestamp(formData.endTime) : '结束时间'"
          @click="
            () => {
              if (!formData.endTime) {
                formData.endTime = new Date().getTime()
              }
              endTimeshow = true
            }
          "
        ></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CusPicker from '@/components/customer/cus-picker-multiple.vue'
import { postAddMeetingAPI } from '@/services/meeting'
// 接收页面参数
const query = defineProps<{
  fromPage: string
  value: string
}>()
const open = ref(false)
const startTimeshow = ref(false)
const endTimeshow = ref(false)
const formData = ref<any>({})

const cusPicker = ref<InstanceType<typeof CusPicker>>()
const convertTimestamp = (timestamp: any) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = date.getMonth() + 1 // getMonth() 返回的月份从0开始，所以需要加1
  const day = date.getDate()
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  // 格式化输出
  return `${year}年${month}月${day}日${hours}时${minutes}分`
}
const formatter = (type: any, value: any) => {
  if (type === 'year') {
    return `${value}年`
  }
  if (type === 'month') {
    return `${value}月`
  }
  if (type === 'day') {
    return `${value}日`
  }
  return value
}

const submitForm = async (e) => {
  if (!formData.value!.title) {
    uni.showToast({
      icon: 'error',
      title: '请输入标题',
    })
    return
  }
  if (!formData.value!.customerIds) {
    uni.showToast({
      icon: 'error',
      title: '请选择客户',
    })
    return
  }
  if (!formData.value!.startTime) {
    uni.showToast({
      icon: 'error',
      title: '请选开始时间',
    })
    return
  }
  if (!formData.value!.endTime) {
    uni.showToast({
      icon: 'error',
      title: '请选结束时间',
    })
    return
  }
  if (!formData.value!.location) {
    uni.showToast({
      icon: 'error',
      title: '请输入地址',
    })
    return
  }
  if (
    formData.value!.endTime &&
    formData.value!.startTime &&
    formData.value!.startTime > formData.value!.endTime
  ) {
    uni.showToast({
      icon: 'error',
      title: '开始时间不能大于结束时间',
    })
    return
  }
  const res = await postAddMeetingAPI(formData.value)
  let pages = getCurrentPages()
  let url = pages[pages.length - 2]['$page']['fullPath']
  if (url === '/pages/index/index') {
    uni.switchTab({
      url: url,
    })
  } else {
    uni.redirectTo({
      url: url,
    })
  }
}

const openSelectCus = async () => {
  cusPicker.value!.open()
}

// 组件挂载完毕
onMounted(() => {
  open.value = true
})
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
}
</style>
